{% extends "base.html" %}
{% block title %}Modbus参数配置{% endblock %}
{% block head %}
<style type="text/css">

</style>
{% endblock %}
{% block content %}
<div class="align-middle col-12 row">
    <h5 class="h2 d-inline">
        <span class="text-muted ">Modbus参数配置</span>
    </h5>
</div>
<hr class="border-bottom border-danger" />

<form action="{{ url_for('mt.modbus') }}" method="post" id='shen' enctype="multipart/form-data" class="needs-validation"
    novalidate>
    <fieldset disabled id='bj'>
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />

        <div class="form-group row">
            <label for="dev_id" class="col-sm-1 col-form-label col-form-label-md">设备ID:</label>
            <div class="col-sm-4">
                <input type="text" name='dev_id' class="form-control form-control-md" id="dev_id"
                    placeholder="device ID" style="width: 100%" required>
                <small id="emailHelp" class="form-text text-muted">这里请填写设备名称</small>
            </div>

        </div>

        <div class="form-group row">
            <label for="Coll_Type" class="col-sm-1 col-form-label col-form-label-md">通讯类型:</label>
            <div class="col-sm-4">
                <select class="form-control form-control-md custom-select" name='Coll_Type' id="Coll_Type"
                    onchange="rtu_tcp()" required>
                    <option>TCP</option>
                    <option selected>RTU</option>
                </select>
                <small id="emailHelp" class="form-text text-muted">请选择通讯类型</small>
            </div>
        </div>

        <hr class="w-25 px-0 mx-0" />


        <div id='tcp'>
            <div class="form-group row">
                <label for="host" class="col-sm-1 col-form-label col-form-label-md">IP地址:</label>
                <div class="col-sm-4">
                    <input type="text" name="host" class="form-control form-control-md" id="host" placeholder="ip address">
                </div>
            </div>
            <div class="form-group row">
                <label for="port" class="col-sm-1 col-form-label col-form-label-md">通讯端口:</label>
                <div class="col-sm-4">
                    <input type="text" name="port" value="502" class="form-control form-control-md" id="port"
                        placeholder="默认502">
                </div>
            </div>
        </div>

        <div id='rtu'>
            <div class="form-group row">
                <label for="serial" class="col-sm-1 col-form-label col-form-label-md">串口:</label>
                <div class="col-sm-4">
                    <input type="text" name='serial' class="form-control form-control-md" id="serial"
                        placeholder="com端口" style="width: 100%">
                    <small id="emailHelp" class="form-text text-muted">这里请填写串口</small>
                </div>
            </div>
            <div class="form-group row">
                <label for="baud" class="col-sm-1 col-form-label col-form-label-md">波特率:</label>
                <div class="col-sm-4">
                    <select class="form-control form-control-md custom-select" name='baud' id="baud">
                        <option>4800</option>
                        <option>9600</option>
                        <option>115200</option>
                    </select>

                </div>
            </div>

            <div class="form-group row">
                <label for="data_bit" class="col-sm-1 col-form-label col-form-label-md">数据位:</label>
                <div class="col-sm-4">
                    <select class="form-control form-control-md custom-select" name='data_bit' id="data_bit">
                        <option>7</option>
                        <option>8</option>

                    </select>

                </div>
            </div>
            <div class="form-group row">
                <label for="stop_bit" class="col-sm-1 col-form-label col-form-label-md">停止位:</label>
                <div class="col-sm-4">
                    <select class="form-control form-control-md custom-select" name='stop_bit' id="stop_bit">
                        <option>1</option>
                        <option>2</option>
                    </select>

                </div>
            </div>
            <div class="form-group row">
                <label for="parity" class="col-sm-1 col-form-label col-form-label-md">校验:</label>
                <div class="col-sm-4">
                    <select class="form-control form-control-md custom-select" name='parity' id="parity">
                        <option>none</option>
                        <option>odd</option>
                        <option>even</option>
                    </select>

                </div>
            </div>
        </div>

        <div class="form-group row">
            <label for="file" class="col-sm-1 col-form-label col-form-label-md">上传位号:</label>
            <div class="col-sm-4">
                <input type="file" name='file' class="form-control form-control-md" id="file" required>
                <div class="invalid-feedback" style="width: 100%;">
                    请选择位号表.
                </div>
            </div>
        </div>

    </fieldset>
    <div class="form-group row">
        <div class="col-sm-4  offset-1">
            <button type="button" class="btn btn-info btn-block btn-md" id='alter' onclick="edit()">edit</button>
            <button type="submit" class="btn btn-primary d-none btn-block btn-md" id='comm1'
                onclick="save()">save</button>
        </div>
    </div>

</form>


<script>
    var csrftoken = $("meta[name=csrf-token]").attr("content");

    function edit() {
        alarms('开始Modbus参数配置')
        $("#alter").addClass("d-none");
        $("#comm1").removeClass("d-none");
        $("#bj").removeAttr("disabled");;

    }

    function save() {
        alarms('保存Modbus参数配置')
        $("#alter").removeClass("d-none");
        $("#comm1").addClass("d-none");
        $("#bj").addAttr("disabled");
    }

    function rtu_tcp() {
        var type_value = $("#Coll_Type").val()

        if (type_value === 'RTU') {
            $("#tcp").addClass("d-none");
            $("#rtu").removeClass("d-none");
        } else if (type_value === 'TCP') {
            $("#rtu").addClass("d-none");
            $("#tcp").removeClass("d-none");
        }

    }


    $(document).ready(function () {
        rtu_tcp();
        $("#alter").click(function () {
            $.ajax({
                url: "{{url_for('mt.show_modbus_page')}}",
                data: {},
                headers: {
                    "X-CSRFToken": csrftoken
                },
                type: 'post',
                dataType: 'json',
                success: success,
                error: function (data) {
                    console.log(data);
                },
            });
            return false;
        });
    })

    function success(data) {
        console.log(data)
        $('#dev_id').val(data.basic_config['dev_id'])
        $('#Coll_Type').val(data.basic_config['Coll_Type'])
        rtu_tcp()
        if (data.basic_config['Coll_Type'] === "TCP") {
            $('#host').val(data.basic_config['host'])
            $('#port').val(data.basic_config['port'])
        } else {
            $('#serial').val(data.basic_config['serial'])
            $('#baud').val(data.basic_config['baud'])
            $('#data_bit').val(data.basic_config['data_bit'])
            $('#stop_bit').val(data.basic_config['stop_bit'])
            $('#parity').val(data.basic_config['parity'])
        }



    }



    (function () {
        'use strict'

        window.addEventListener('load',
            function () {
                // Fetch all the forms we want to apply custom Bootstrap validation styles to
                var forms = document.getElementsByClassName('needs-validation')

                // Loop over them and prevent submission
                Array.prototype.filter.call(
                    forms,
                    function (form) {
                        form.addEventListener('submit',
                            function (event) {
                                if (form.checkValidity() === false) {
                                    event.preventDefault()
                                    event.stopPropagation()
                                }
                                form.classList.add('was-validated')
                            }, false)
                    })
            }, false)
    }())
</script>
{% endblock %}